.online-box {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 1.25rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .online-head {
    box-sizing: border-box;
    position: relative;
    height: 3.75rem;
    padding: 0.625rem 1.5rem;
    background-color: rgb(48, 151, 239);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    .zz-info {
      flex-grow: 1;
      cursor: pointer;
    }
  }
  .chat-list {
    flex-grow: 1;
    box-sizing: border-box;
    padding: 0.625rem;
    overflow-y: scroll;
    &::-webkit-scrollbar {
      width: 3px;
      background-color: initial;
    }
    &::-webkit-scrollbar-button {
      height: 0;
      width: 0;
      display: none;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #a7b2be;
      mix-blend-mode: normal;
      min-height: 115px;
      border-radius: 4px;
    }
    .chat-item {
      display: flex;
      margin-bottom: 0.625rem;
      font-size: 1rem;

      & > img {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 1.125rem;
      }
      .chat-time {
        margin-bottom: 0.25rem;
      }
      .chat-cont {
        box-shadow: 0 2px 4px 0 rgb(207 209 211);
        border: 1px solid #e6e6e6;
        padding: 0.375rem;
        word-break: break-all;
      }
    }
    .chat-left {
      flex-direction: row;
      .chat-user-img {
        margin-right: 8px;
      }
      .chat-cont-wrap {
        padding-right: 3.125rem;
        .chat-time {
          text-align: left;
        }
        .chat-cont {
          text-align: justify;
          border-radius: 0 16px 16px 16px;
        }
      }
    }
    .chat-right {
      flex-direction: row-reverse;
      .chat-user-img {
        margin-left: 8px;
      }
      .chat-cont-wrap {
        padding-left: 3.125rem;

        .chat-time {
          text-align: right;
        }
        .chat-cont {
          text-align: justify;
          border-radius: 16px 0 16px 16px;
        }
      }
    }
  }
  .chat-input-wrap {
    box-sizing: border-box;
    min-height: 8.75rem;
    padding: 0.625rem 5.625rem 0.625rem 0.625rem;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    textarea {
      width: 100%;
      height: 100%;
      display: inline-block;
      border: 0 !important;
      outline: none;
      resize: none;
      &::-webkit-scrollbar {
        width: 3px;
        background-color: initial;
      }
      &::-webkit-scrollbar-button {
        height: 0;
        width: 0;
        display: none;
      }
      &::-webkit-scrollbar-thumb {
        background-color: #c6ccd3;
        mix-blend-mode: normal;
        min-height: 115px;
        border-radius: 4px;
      }
    }

    .send-btn {
      position: absolute;
      bottom: 0.625rem;
      right: 1.25rem;
      display: inline-block;
      padding: 0.25rem 0.375rem;
      background-color: rgb(48, 151, 239);
      color: white;
      border-radius: 6px;
      i {
        font-size: 1rem;
      }
    }
  }
}
